<template>
  <div>
    <el-dialog
      title="直接外呼"
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      width="600px"
      :append-to-body="false"
      @close="handleClose"
    >
      <el-form label-width="100px" :model="formDate" :rules="rules" ref="ruleForm">
        <el-form-item label="外呼号码:" prop="mobile">
          <el-input
           @keyup.native="handleKeyUp"
            type="number"
            placeholder="请输入外呼号码"
            v-model="formDate.mobile"
            size="small"
            clearable
            style="width: 260px;"
          >
          </el-input>
        </el-form-item>
        <div style="padding:5px 30px;">
          <p>
            <span style="color: red;">*</span>
            <span>根据中华人民共和国民法典第一千零三十三条和工信部信管[2020] 81号之相关规定,请您在电话过程中注意如下事项:</span>
          </p>
          <p>
           1.除法律另外规定或者接听人同意以外，任何组织或者个人不能以电话/短信等形式陌生骚扰接听人;
          </p>
          <p>
            2.商业外呼过程中请保持态度温和，禁止出现：语言傲慢，侮辱，辱骂，恐吓，欺诈等语言行为;
          </p>
          <p>
            3.商业外呼过程中必须以许可式业务回访内容形式开展。
          </p>
          <p>
            如因以上原因导致用户投诉，会依据所签合同和民法典保留追究贵公司的一切权益，望大家遵守法律，配合执行，谢谢。
          </p>
        </div>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="btnOk" :loading="btnLoading1">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { callCustomerMobileAPI } from '@/api/company'
const defaultListQuery = {
  mobile: "", //外呼号码
};
export default {
  name: "outboundCall",
  data() {
    return {
      dialogVisible: false,
      formDate: JSON.parse(JSON.stringify(defaultListQuery)),
      btnLoading1:false,
      rules: {
        mobile: [
          { required: true, message: '请输入外呼号码', trigger: 'blur' },
        ],
      }
    };
  },
  created() {},
  methods: {
    // 回车
    handleKeyUp(event){
      this.$refs.ruleForm.validate((valid) => {
        if (valid&&event.keyCode==13) {
         this.btnLoading1 = true;
         this.callCustomerMobile();
        } else {
          return false;
        }
      })
    },
    // 提交
    async btnOk() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
         this.btnLoading1 = true;
         this.callCustomerMobile();
        } else {
          return false;
        }
      })
    },
    // 调用拨号接口
    callCustomerMobile(){
      const data=JSON.parse(JSON.stringify(this.formDate))
      callCustomerMobileAPI(data).then((res) => {
        this.$message.success('拨号中,请关注!')
        this.btnLoading1 = false;
      }).catch((error) => {
        this.btnLoading1 = false;
      })
    },
    // 回显
    showPop(row) {
      this.dialogVisible = true;
      if (row.hasOwnProperty('customerMobile')) {
        this.formDate.mobile = row.customerMobile;
      } else if (row.hasOwnProperty('contactMobile')) {
        this.formDate.mobile = row.contactMobile;
      }else {
        this.formDate = JSON.parse(JSON.stringify(defaultListQuery));
      }
    },
    // 关闭弹框
    handleClose() {
      this.dialogVisible = false;
      this.formDate = JSON.parse(JSON.stringify(defaultListQuery));
      this.$refs.ruleForm.resetFields();
    },
  },
};
</script>
<style lang="scss">
</style>
